<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="name"
        label="用户名"
        width="130">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="用户性别"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sex == 0" type="danger">女</el-tag>
          <el-tag v-else-if="scope.row.sex == 1" type="success">男</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="imgs"
        label="用户头像"
        width="130">
        <template slot-scope="scope">
          <img :src="scope.row.imgs" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column
        prop="orderid"
        label="订单编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ordername"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="photo"
        label="商品图片"
        width="130">
        <template slot-scope="scope">
          <img :src="scope.row.photo" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column
        prop="orstatus"
        label="商品状态"
        width="130">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orstatus == 0" type="danger">未支付</el-tag>
          <el-tag v-else-if="scope.row.orstatus == 1" type="success">已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="ordertime"
        label="下单时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="endtime"
        label="支付时间"
        width="120">
      </el-table-column>

<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        label="操作"-->
<!--        width="100">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
<!--          <el-button type="text" size="small">编辑</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="pageNum"-->
<!--      :page-sizes="[10, 20, 30, 40]"-->
<!--      :page-size="pageSize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total">-->
<!--    </el-pagination>-->
  </div>
</template>

<script>

import axios from "axios";
export default {
  data() {
    return {
      form: {},
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      pageNum:1,
      pageSize:10,
      total:0
    };
  },
  created() {
    // 页面加载时获取数据
    // this.fetchData();
    this.findAll();
  },
  methods: {
    findAll() {
      this.axios.post('admin/orders/findAll',this.form).then(res=>{
        this.tableData = res.data;
        console.log(this.tableData)
      })
      // this.fetchData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this. pageNum = val;
      this.fetchData();
    },
    // fetchData() {
    //   // 这里可以发送Axios请求获取数据，根据form中的条件和分页信息
    //   // 假设返回的数据结构是{data: [...], total: 100}
    //   // 这里先模拟一个空数据的情况
    //   axios.post('my/mypage/findUsersList', this.form).then(res=>{
    //     console.log(res)
    //     this.tableData = res.data.data.records;
    //     console.log(res.data.total)
    //     this.total = res.data.data.total;
    //   })
    //
    //
    // }
  }
};
</script>

<style scoped>
.pagination {
  text-align: right;
}
</style>
